<template>
<div class="settings-container">
  <var-snackbar v-model:show="show"> 上传成功！ </var-snackbar>
  <var-app-bar title="设置">
    <template #left>
      <var-button
          round
          text
          color="transparent"
          text-color="#fff"
          @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>
  <div class="content">
    <div class="cells">
      <span>账号设置</span>
      <var-cell border v-ripple @click="changeDialog=true" v-show="isLogin"> 修改账号信息 </var-cell>
      <var-cell border v-ripple v-show="isLogin" @click="avaterDialog=true"> 修改头像 </var-cell>
    </div>
    <div class="cells">
      <span>{{ isLogin ? '登出' : '登录' }}</span>
      <var-cell border v-ripple @click="logout"> {{ isLogin ? '登出账号' : '登录账号' }} </var-cell>
    </div>
  </div>
  <var-popup v-model:show="avaterDialog">
    <div class="change-user-info">
      <div class="dialog-content">
        <var-uploader v-model="files" :maxlength="1"/>
        <var-button type="primary" style="margin-top: 40px;margin-left: 5px" @click="upload" :loading="loading" block>上传头像</var-button>
      </div>
    </div>
  </var-popup>

  <var-popup v-model:show="changeDialog">
    <div class="change-user-info">
      <div class="dialog-content">
        <var-select placeholder="请选择一个修改的内容" v-model="checkBoxValue" style="margin-top: 50px">
          <var-option label="账户名" />
          <var-option label="密码" />
          <var-option label="邮箱" />
        </var-select>
        <var-input placeholder="请输入修改后的内容" v-model="input" style="margin-top: 30px"/>
        <var-button block style="margin-top: 50px" type="primary" @click="updateUser">修改</var-button>
      </div>
    </div>
  </var-popup>

</div>
</template>

<script lang="ts" setup>
import router from "@/router";
import {Dialog} from "@varlet/ui";
import {onMounted, ref} from "vue";
import {update, uploadAvatar} from "@/api/user";
import store from "@/store";

const changeDialog = ref(false);
const checkBoxValue = ref('');
const input = ref('');
const isLogin = ref(false)
const avaterDialog = ref(false)
const files = ref([])
const loading = ref(false)
const show = ref(false)

const actions = {
  confirm: () => {

    if (isLogin.value) {
      sessionStorage.removeItem("user");
      store.state.userModel = null;
    }
      router.push('/home')
  },
  cancel: () => {
    console.log()
  }
}
const upload = () => {
  loading.value = true
  let form = new FormData();
  form.append("file" , files.value[0].url)
  form.append("id" , store.state.userModel.id)
  uploadAvatar(form)
      .finally(() => {
        show.value = true
        files.value = []
        router.push('/main/personal')
        loading.value = false
      })
}
const goBack = () => {
  router.back();
}
const updateUser = () => {
  let formData = new FormData();
  switch (checkBoxValue.value) {
    case '密码' : {
      formData.set("password" , input.value);
      break;
    }
    case '账户名' : {
      formData.set("username" , input.value);
      break;
    }
    case '邮箱' : {
      formData.set("email" , input.value);
      break;
    }
  }
  formData.set("id" , store.getters['getUserModel'].id)
  update(formData)
      .then((res) => {
        if (res !== undefined) {
          Dialog('修改成功');
        }
      })
}
const logout = async () => actions[await Dialog('确定要登出账号？')]()

onMounted(() => {
  isLogin.value = store.state.userModel != null;
})

</script>

<style scoped>
.settings-container{
  width: 100%;
  height: 100%;
}
.content{
  width: 90%;
  padding-left: 5%;
  padding-top: 5%;
}
.var-cell{
  height: 20px;
}
.cells{
  margin-top: 10px;
}
.cells>.var-cell:first-child{
  margin-top: 10px;
}
.change-user-info {
  width: 300px;
  height: 400px;
  border-radius: 20px;
}
.dialog-content{
  width: 90%;
  height: 80%;
  padding-left: 11%;
  padding-top: 10%;
}

</style>